<template>
    <view class="page-box">
        <view class="uni-sroll" style="display: none;">
            <v-tabs :fixed="true" height="88rpx" :lineScale="1" v-model="current" :tabs="tabs" @change="changeTab" color="#404547" lineColor="#1226aa" activeColor="#1E2021"></v-tabs>
        </view>
        <view class="search-box row verCenter" :class="{ rowCenter: !search_show }" @click="search_show = true">
            <text class="iconfont icon-a-tubiaochangyongsousuo"></text>
            <text class="txt" v-if="!search_show">请输入产品名称</text>
            <input v-model="searchParams.product_name" focus class="uni-input" placeholder="请输入产品名称" placeholder-style="color:#6E767A" v-if="search_show" @input="onInput" />
        </view>
        <view class="container-tabs-list">
            <swiper class="container-tabs-swiper" :current="swiperCurrent" @change="animationFinished" duration="800">
                <swiper-item class="swiper-item" v-for="(outIndex) in tabs" :key="outIndex">
                    <scroll-view scroll-y style="height: 100%" @scrolltolower="loadMore">
                        <!-- 循环订单列表 -->
                        <view class="list" v-if="list.length > 0">
                            <navigator class="box" v-for="(item, index) in list" :key="index" hover-class="none" :url="'/pages/admin/audit?order_id=' + item.id">
                                <view class="top row bothSide">
                                    <view class="left row">
                                        <text class="iconfont" :class="{ 'icon-a-tubiaochangyongsousuo5': item.type == 1, 'icon-a-tubiaochangyongsousuo19': item.type == 2 }"></text>
                                        <view class="text">
                                            <view class="p1">订单编号：{{ item.order_sn }}</view>
                                            <view class="p2">{{ item.create_time }}</view>
                                        </view>
                                    </view>
                                    <view class="right row verCenter"></view>
                                </view>
                                <view class="wrap row bothSide">
                                    <view class="text-item row verCenter">
                                        <text class="label">产品名称：</text>
                                        <text class="t1">{{ item.product_name }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">客户信息：</text>
                                        <text class="t1 ellipsis">{{ item.apply_name }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">所属渠道：</text>
                                        <text class="t1">{{ item.channel_user_name }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">申请金额：</text>
                                        <text class="t2">{{ item.apply_amount }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">授信金额：</text>
                                        <text class="t2">{{ item.credit_amount }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">放款金额：</text>
                                        <text class="t2">{{ item.lending_amount }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">业务进度：</text>
                                        <text class="t1">{{ item.self_business_progress_val }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">业务节点：</text>
                                        <text class="t1 ellipsis">{{ item.self_business_progress_node_val }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">放款时间：</text>
                                        <text class="t1">{{ item.create_time.split(' ')[0] }}</text>
                                    </view>
                                    <view class="text-item row verCenter">
                                        <text class="label">进件状态：</text>
                                        <text class="t1">{{ item.status_val }}</text>
                                    </view>
                                </view>
                                <view class="row" style="justify-content: flex-end;">
                                    <view class="btn row rowCenter verCenter">审核</view>
                                </view>
                            </navigator>
                        </view>
                        <view class="no-data column rowCenter verCenter" v-if="list.length === 0 && !is_loading">
                            <image src="@/static/card.dd09cd89.png" class="pic" mode="aspectFill"></image>
                            <text class="tt">暂无审核单据～</text>
                        </view>
                        <view class="loadBottom row rowCenter verCenter" v-if="loadBottom && page > 1">—— 数据已经到底 ——</view>
                        <!-- 循环订单列表结束 -->
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import { API } from '@/util/api.js';

export default {
    data() {
        return {
            tabs: ['自有产品', '第三方产品', 'API订单'],
            current: 0,
            swiperCurrent: 0,
            list: [],
            search_show: false, // 搜索切换
            loadBottom: false, // 是否加载更多
            is_loading: false, // 是否正在加载
            total: 0,
            page: 1,
            limit: 10,
            searchParams: {
                product_type: 1,
                product_api: '',
                product_name: ''
            }
        };
    },
    onShow() {
        this.getData();
    },
    methods: {
        getData() {
            if (this.is_loading) return;
            this.is_loading = true;

            this.request(API.getAuditList, 'GET', { page: this.page, limit: this.limit, ...this.searchParams }, true).then(res => {
                this.is_loading = false;

                if (res.code === 0) {
                    var newData = res.data.list || [];
                    this.total = res.data.total || 0;

                    // 分页逻辑：第一页直接赋值，后续页面追加数据
                    if (this.page === 1) {
                        this.list = newData;
                    } else {
                        this.list = [...this.list, ...newData];
                    }

                    // 判断是否已加载完所有数据
                    this.loadBottom = newData.length < this.limit || this.list.length >= this.total;

                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                }
            })
        },
        /**
         * 切换后的回调
         * @param {Object} e
         */
        animationFinished(e) {
            var current = e.detail.current;
            this.current = current;
            this.swiperCurrent = current;

            // 根据tab索引设置参数
            if (current === 0) { // 自有产品
                this.searchParams.product_type = 1;
                this.searchParams.product_api = '';
            } else if (current === 1) { // 第三方产品
                this.searchParams.product_type = 2;
                this.searchParams.product_api = '';
            } else if (current === 2) { // API订单
                this.searchParams.product_type = 1;
                this.searchParams.product_api = 1;
            }

            this.resetChange();
            this.getData();
        },
        /**
         * tab切换
         * @param {Object} index
         */
        changeTab(index) {
            this.current = index;
            this.swiperCurrent = index;
        },
        /**
         * 搜索监听
         */
        onInput() {
            this.resetChange();
            this.getData();
        },
        /**
         * 加载更多
         */
        loadMore() {
            if (this.is_loading || this.loadBottom) {
                return false;
            }
            this.page++;
            this.getData();
        },
        /**
         * 重置数据
         */
        resetChange() {
            this.list = [];
            this.page = 1;
            this.loadBottom = false;
        }
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/admin/list.scss';
</style>